<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05自定义对象</title>
</head>
<body>

<table border="1xp">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品库存</th>
  </tr>
</table>
<script>
  let p1={
    name:'李四',
    age:18,
    eat:function (){
      console.log(this.name+'~~~'+this.age);
    }
  };
  console.log(p1);
  p1.eat();

  let productInfo = {
    title:'Iphone16_Pro',
    price:'9999',
    color:'远峰蓝',
    size:'6.7寸',
    cpu:'A16'
  }
  console.log(productInfo);

  let productArr = [
    {title: '华为mate60',price:8000,num:999999},
    {title: 'iqooz9turbo',price:1899,num:199},
    {title: 'iphone13pro',price:4000,num:99},
    {title: 'RealmeGtneo5se',price:1499,num:159}
  ]


    for(let i = 0;i<productArr.length;i++){
      let uTitle = productArr[i].title;
      let uPrice = productArr[i].price;
      let uNum = productArr[i].num;

      let tr = document.createElement('tr');

      let titleTd = document.createElement('td');
      let priceTd = document.createElement('td');
      let numTd = document.createElement('td');

      titleTd.innerHTML = uTitle;
      priceTd.innerHTML = uPrice;
      numTd.innerHTML = uNum;

      tr.append(titleTd,priceTd,numTd);

      document.querySelector('table').append(tr);
    }



</script>

</body>
</html>